<template>
  <div class="orderdetail-wrap">
    <div v-title style="display: none">订单详情</div>
    <div class="orderdetail-header">
      <img class="img1" :src="'http://cj.lightway.cc/media/' + this.coachinfo.img"/>
      <div class="coach-info">
        <p class="name">{{ this.coachinfo.coach }}
          <span class="status" v-if="this.ordertype !== 'closed'">{{ this.status(ordertype) }}</span>
          <span class="unable-statu" v-else>{{ this.status(ordertype) }}</span>
        </p>
        <p class="star">
          <stars :grade="this.coachinfo.average_grade"></stars>
          {{ this.coachinfo.average_grade + '分' }}
        </p>
      </div>
    </div>
    <div class="orderdetail-mark">
      <div class="mark">
        <span>服务态度:<span>{{ this.coachinfo.serve_grade }}</span></span>
        <span>教学质量:<span>{{ this.coachinfo.teaching_grade }}</span></span>
        <span>车容车况:<span>{{ this.coachinfo.car_grade }}</span></span>
      </div>
    </div>
    <div class="orderdetail-content">
      <div class="title-orderdetail">
        <span class="icon1"></span>
        <span class="span1">联系方式</span>
      </div>
      <div>
        <div class="order-pay">
          <span><a :href="'tel:' + this.coachinfo.mobile" class="tel">{{ this.coachinfo.mobile }}</a></span>
          <span class="wechat" v-show="wechat" @click="addwechat">添加微信好友</span> 
        </div>
      </div>
    </div>
    <QRcode :imgurl="this.coachinfo.qr_img" v-show="qrcode" v-on:getqr="showqr"></QRcode>
    <div class="orderdetail-content">
      <div class="title-orderdetail">
        <span class="icon2"></span>
        <span class="span1">预约日期：<span>{{ date(this.coachinfo.date) }}</span> <span>{{ week(this.coachinfo.date) }}</span></span>
      </div>
      <div v-for="(item,index) in this.courseinfo">
        <div class="orderdetail-flex">
          <span>{{ time(item.start_time) + '~' + time(item.end_time) }}</span>
          <span>{{ '￥' + item.price }}</span>
        </div>
      </div>
      <div class="price-all">         
        <span class="spanA"><span class="spanB">共计<span>{{ times }}</span>个小时 小计：</span>{{ '￥' + this.price }}</span>
      </div>
    </div>
    <div class="orderdetail-content">
      <div class="title-orderdetail">
        <span class="icon3"></span>
        <span class="span1">培训详情</span>
      </div>
      <div>
        <div class="order-pay">
          <span>培训内容</span>
          <span>{{ this.orderinfo.subject }}</span>     
        </div>
        <div class="order-pay">
            <span>培训车型</span>
            <span>{{ this.orderinfo.car_type }}</span>     
        </div>
      </div>
    </div>
    <div class="orderdetail-content">
      <div class="title-orderdetail">
        <span class="icon4"></span>
        <span class="span1">培训地点</span>
        <span class="mores"></span>
      </div>
      <div>
        <div class="order-pay">
          <span>{{ this.coachinfo.area + ' ' + this.coachinfo.training }}</span>
        </div>
      </div>
    </div>

    <div class="confirm-fix" v-show="this.ordertype !== 'close' && this.ordertype !== 'await' && this.ordertype !== 'completed'"></div>

    <div class="one-footer" v-show="this.ordertype === 'notevaluate'">
      <div class="order-footer-pay">
        <span class="span-order" @click="goComment">前往评论</span>
      </div>
    </div>
    <div class="two-footer" v-show="this.ordertype === 'notused'">
      <div class="footer-comment">
        <span class="span-sum" @click="goCancel">我要退款</span>
        <span class="span-order" @click="goUncomment">我已上车</span>
      </div>
    </div>
    <div class="two-footer" v-show="this.ordertype === 'nonpay'">
      <div class="footer-comment">
        <span class="span-sum" @click="goCancel">取消订单</span>
        <span class="span-order" @click="payment">确认支付</span>
      </div>
    </div>

  <!--  <notification notification="您已提交预约申请，请等候教练确认订单，或可根据提供的联系方式，联系教练。" title="等待确认" isWithdraw="" v-show="tooltip" v-on:gettooltip="showtooltip"></notification> -->
    <notification notification="现在无法确认上车，请在预约课程时间前半小时内确认上车。" title="提示" isWithdraw="" v-show="tip" v-on:gettooltip="showtooltip"></notification>
    <notification notification="确认已上车后，将不可进行退款及取消订单操作。是否确认已上车？。" title="提示" isWithdraw="twoCallback" isrouter='/orderdetail/' :query='this.$route.query.order_id' v-show="tips" v-on:gettooltip="showtooltip"></notification>

  </div>
</template>
<script type="text/ecmascript-6">
import notification from 'components/notification/notification';
import QRcode from 'components/QRcode/QRcode';
import stars from 'components/stars/stars';
 export default {
    data() {
      return {
        coachinfo: [],
        orderinfo: [],
        courseinfo: [],
        price: 0,
        times: 0,
        ordertype: '',
        weekArray: [ '周日', '周一', '周二', '周三', '周四', '周五', '周六' ],
        tooltip: '',
        tip: '',
        wechat: '',
        qrcode: '',
        tips: ''
      };
    },
    created() {
      let orderid = this.$route.query.order_id;
      this.$http.post('api/course/ordercheckpayments/', {order_num: orderid, mobile: window.localStorage.cphone}).then(response => {
        this.coachinfo = response.body.coach_arr;
        if (this.coachinfo.qr_img !== '') {
          this.wechat = 'true';
        }
        this.ordertype = this.coachinfo.status;
        this.orderinfo = response.body.order_data;
        this.courseinfo = response.body.course;
        for (let i in this.courseinfo) {
          this.price += this.courseinfo[i].price;
          this.times += parseInt(this.hour(this.courseinfo[i].end_time)) - parseInt(this.hour(this.courseinfo[i].start_time));
        }
      });
    },
    methods: {
      status: function(value) {
        if (value === 'nonpay') {
          return '待付款';
        } else if (value === 'paied') {
          return '已支付';
        } else if (value === 'notconfirmed') {
          return '待确认';
        } else if (value === 'notused') {
          return '待使用';
        } else if (value === 'notevaluate') {
          return '待评价';
        } else if (value === 'refunded') {
          return '已退款';
        } else if (value === 'await') {
          return '待退款';
        } else if (value === 'closed') {
          return '已关闭';
        } else if (value === 'completed') {
          return '交易完成';
        }
      },
      date: function(value) {
        return value.substr(5);
      },
      week: function(value) {
        let weeks = value.split('-');
        let weekday = new Date(weeks[0], parseInt(weeks[1] - 1), weeks[2]);
        return this.weekArray[weekday.getDay()];
      },
      time: function(value) {
        return value.substr(0, 5);
      },
      hour: function(value) {
        return value.substr(0, 2);
      },
      goCancel() {
        let orderid = this.$route.query.order_id;
        this.$router.push({path: '/ordercancel/', query: {order_id: orderid}});
      },
      goComment() {
        let orderid = this.$route.query.order_id;
        this.$router.push({path: '/comment/', query: {order_id: orderid}});
      },
      goUncomment() {
        let orderid = this.$route.query.order_id;
        this.$http.post('api/course/uppaymentsstatus/', {order_num: orderid, status: 'notevaluate'}).then(response => {
          if (response.body.errno === 0) {
            this.tip = 'true';
          } else {
            this.tips = 'true';
          }
        });
      },
      showtooltip(msg) {
        this.tooltip = msg.tooltip;
        this.tip = msg.tooltip;
        this.tips = msg.tooltip;
      },
      showqr(msg) {
        this.qrcode = msg;
      },
      addwechat() {
        this.qrcode = 'true';
      },
      payment() {
        var orderid = this.$route.query.order_id;
        this.$http.post('api/pay/paymentsbyordernum/', {order_num: orderid, op_id: window.localStorage.openid}).then(response => {
            var data = response.body.data;
            function onBridgeReady() {
               window.WeixinJSBridge.invoke(
                   'getBrandWCPayRequest', {
                      'appId': data.appId,
                      'timeStamp': data.timeStamp,
                      'nonceStr': data.nonceStr,
                      'package': data.package,
                      'signType': data.signType,
                      'paySign': data.paySign
                   },
                   function(res) {
                      if (res.err_msg === 'get_brand_wcpay_request:ok') {
                          window.location.replace('/orderdetail/?order_id=' + orderid);
                      } else {
                      }
                   }
               );
            }
            if (typeof WeixinJSBridge === 'undefined') {
              window.alert('请用微信付款');
               if (document.addEventListener) {
                   document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
               } else if (document.attachEvent) {
                   document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                   document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
               }
            } else {
               onBridgeReady();
            }
        });
      }
    },
    components: {
      notification,
      QRcode,
      stars
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"
  /* 主要文字 黑 $main-fn
     次要文字 灰 $se-fn
     预填文字 灰 $pre-fn
     描边 灰 $border 
     背景 灰白 $bg 
     主题 红 $theme
     辅助 蓝 $assist */
  .orderdetail-wrap
    .orderdetail-header
      height 86px
      background-color $bg-white
      width 100%
      .img1
        width 67px
        height 69px
        border 1px solid $se-fn
        border-radius 5px
        margin-top 14px
        float left
        margin-left 17px
      .coach-info
        margin-left 15px
        display inline-block
        float left
        margin-top 16px
        font-size 16px
        .name
          height 23px
          width 100%
          line-height 23px
          .status
            position absolute
            right 17px
            font-size 11px
            color $theme
            width 50px
            height 21px
            line-height 21px
            text-align center
            border 1px solid $theme
            border-radius 5px
          .unable-statu
            position absolute
            right 17px
            font-size 11px
            color $se-fn
            width 50px
            height 21px
            line-height 21px
            text-align center
            border 1px solid $se-fn
            border-radius 5px
        .star
          margin-top 30px
          font-size 15px
          color $se-fn
          margin-left -2px
    .orderdetail-mark
      background-color $bg-white
      width 100%
      height 36px
      .mark
        height 100%
        line-height 36px
        color $se-fn
        font-size 13px
        display flex
        justify-content space-between
        margin-left 17px
        margin-right 17px
    .orderdetail-content
      background-color $bg-white
      min-height 40px
      width 100%
      margin-top 11px
    .title-orderdetail
      height 40px
      width 100%
      line-height 40px
      font-size 16px
      border-1px($border)
      .icon1
        display inline-block
        float left
        margin-left 15px
        margin-top 13px
        bg-image('phone')
        rectangle-icon(rgb(255,255,255),13px,14px)
      .icon2
        display inline-block
        float left
        margin-left 15px
        margin-top 13px
        bg-image('shedule_icon')
        rectangle-icon(rgb(255,255,255),13px,14px)
      .icon3
        display inline-block
        float left
        margin-left 15px
        margin-top 14px
        bg-image('detail')
        rectangle-icon(rgb(255,255,255),15px,11px)
      .icon4
        display inline-block
        float left
        margin-left 15px
        margin-top 13px
        bg-image('location')
        rectangle-icon(rgb(255,255,255),12px,14px)
      .span1
        margin-left 5px
        font-size 16px
    .order-pay
      display flex
      justify-content space-between
      padding-left 38px
      padding-right 26.5px
      height 40px
      border-1px($border)
      color $se-fn
      line-height 40px
      font-size 15px
      .tel
        color rgb(87,107,149)
      .wechat
        display inline-block
        height 21px
        width 84px
        text-align center
        font-size 11px
        background-color rgb(26,173,25)
        color $bg-white
        line-height 21px
        margin-top 9px
        border-radius 5px
    .orderdetail-flex
      display flex
      justify-content space-between
      padding-left 38px
      padding-right 27px
      height 40px
      border-1px($border)
      color $se-fn
      line-height 40px
      font-size 15px
    .price-all
      height 40px
      line-height 40px
      border-1px($border)
      .spanA
        float right
        margin-right 27px
        text-align right
        font-size 16px
        color $theme
        .spanB
          color $se-fn
          font-size 13px
    .confirm-fix
      height 55px
      width 100%
    .one-footer
      height 47px
      position fixed
      bottom 0px
      width 100%
    .order-footer-pay
      margin-left 0px
      margin-right 0px
      display flex
      justify-content space-between
      background-color rgba(33,33,33,0.8)
      .span-order
        text-align center
        background-color $theme
        width 30%
        font-size 16px
        display inline-block
        margin-left 70%
        color $bg-white
        line-height 47px

    .two-footer
      height 47px
      position fixed
      bottom 0px
      width 100%
      .footer-comment
        margin-left 0px
        margin-right 0px
        display flex
        justify-content space-between
        background-color rgba(33,33,33,0.8)
        span
          display inline-block
          color $bg-white
          line-height 47px
        .span-sum
          margin-left 40%
          background-color rgb(114,114,114)
          width 30%
          color $bg-white
          font-size 15px
          text-align center
        .span-order
          text-align center
          background-color $theme
          width 30%
          font-size 16px
</style>